<template>
  <el-form :model="ruleForm" ref="ruleForm" :inline="false">

    <el-card class="box-card" shadow="never">
      <div slot="header" class="header-card">
        <span class="header-card-title">基础信息</span>
      </div>

      <el-table :data="ruleForm.tableData" border>

        <el-table-column align="center" label="车牌号" prop="carNo" min-width="160" />
        <el-table-column align="center" label="车架号" prop="vinNo" min-width="150" />
        <el-table-column align="center" label="品牌/车系/车型" show-overflow-tooltip min-width="320">
          <template #default="{row}">
            {{ row.brandName }}{{ row.seriesName ? '/' + row.seriesName : '' }}{{
              row.modelName ? '/' + row.modelName
                  : ''
            }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="车辆产权" show-overflow-tooltip min-width="160" prop="propertyRightName" />
        <el-table-column align="center" label="车辆归属" show-overflow-tooltip min-width="160" prop="ascription" />
        <el-table-column align="center" label="车辆运营" show-overflow-tooltip min-width="120" prop="operationsName" />
        <el-table-column align="center" label="车辆大区" show-overflow-tooltip min-width="160">
          <template #default="{row}">
            <span v-if="row.region">{{row.region}} </span>

          </template>
        </el-table-column>
        <!--商业险-->
        <el-table-column align="center" label="商业险">
          <el-table-column align="center" label="保单号" min-width="160" prop="syxPolicyCode" />
          <el-table-column align="center" label="保险公司" min-width="180" prop="syxCompany" />
          <el-table-column align="center" label="保险到期日" min-width="140" prop="syxActualEndTime" />
          <el-table-column align="center" label="总费用/元" min-width="120" prop="totalAmount" >
            <template #default="{row}">
              {{format_thousand(row.totalAmount)}}
            </template>
          </el-table-column>
        </el-table-column>

      </el-table>

    </el-card>
  </el-form>
</template>

<script>
export default {
  name: "infoTable",
  props: {
    value: {
      type: Object,
      default: {},
    },
    state: {
      type: String,
      default: "",
    },
  },
  computed: {
    ruleForm: {
      get() {
        let that = this;
        const proxy = new Proxy(that.value, {
          get(target, key) {
            return Reflect.get(target, key);
          },
          set(target, key, value) {
            that.$emit("input", { ...target, [key]: value });
            return true;
          },
        });
        return proxy;
      },
    },
    isEdit() {
      let bool;
      switch (this.state) {
        case "write":
          bool = true;
          break;
        case "disabled":
          bool = false;
          break;
        case "readonly":
          bool = false;
          break;
      }
      return bool;
    },
  },
  data() {
    return {};
  },
  created() {},
  mounted() {},
  methods: {
    handleEffect() {
      return new Promise((resolve, reject) => {
        this.$refs.ruleForm.validate((valid) => {
          if (valid) {
            resolve();
          } else {
            reject();
          }
        });
      });
    },

    valid() {
      return new Promise((resolve) => {
        this.$refs.ruleForm.validate((valid) => {
          resolve(valid);
        });
      });
    },
  },
};
</script>

<style scoped lang="scss">
.el-form {
  ::v-deep.formTable {
    margin-bottom: 0;
  }
}

.box-card {
  font-size: 14px;
  margin-bottom: 16px;
}

::v-deep .header-class {
  .cell::before {
    content: "*";
    color: red;
    padding-right: 2px;
    font-size: 14px;
  }
}
</style>


